<template>
	<view class="news-container">
		<view class="all-publish-box" @click="toNewsArticleList">
			<view class="title-box">
				<view class="title-left-line"></view>
				<text class="title-text">{{联盟动态[locaLang]}}</text>
			</view>
			<view class="right-box">
				<text class="right-text">{{全部[locaLang]}}</text>
				<uni-icons type="right" color="#777"></uni-icons>
			</view>
		</view>
		<unicloud-db ref="udb" :where="whrer" @load="onLoadData" collection="opendb-news-articles"
			field="title,url,avatar" page-data="add" :page-size="6" :page-current="1" :getcount="true"
			orderby="last_modify_date desc" v-slot:default="{data, loading, error, options}">
			<view class="list-box">
				<uv-list :customStyle="{'margin': '0 1.25rem','padding': '1.25rem 0px'}">
					<template v-for="(item,index) in data" :key="item._id">
						<uv-list-item show-arrow clickable @click="toArticalDetail(item._id)">
							<template v-slot:default>
								<view class="list-item-box">
									<view class="img-box" v-if="item.avatar">
										<image :src="$thumbImg(item.avatar,'160x120')" mode="aspectFit"></image>
									</view>
									<view class="title-box">
										<text>{{item.title[locaLang]}}</text>
									</view>
								</view>
							</template>
						</uv-list-item>
					</template>
				</uv-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		name: "home-article-list",
		data() {
			return {
				whrer: {
					category_id: '673faa778b0da4fe220f9408'
				}
			};
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			联盟动态() {
				return {
					en: 'Alliance Updates',
					ru: 'Обновления Альянса',
					kk: 'Одақ Жаңалықтары',
					"zh-Hans": "联盟动态"
				}
			},
			全部() {
				return {
					en: 'All',
					ru: 'Все',
					kk: 'Барлық',
					"zh-Hans": "全部"
				}
			}
		},
		methods: {
			onLoadData(e) {
				// console.log(e);
			},
			toNewsArticleList() {
				uni.navigateTo({
					url: '/pages/publish/news-article-list',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toArticalDetail(id) {
				uni.navigateTo({
					url: '/pages/publish/news-article-detail?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.news-container {
		width: 100%;
		padding-top: 1.5rem;
		background-color: #fff;
		margin-bottom: 0.3125rem;
		border-radius: 0.625rem;
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
		/* 调整阴影的偏移、模糊度和透明度 */

		.all-publish-box {
			padding: 0rpx 1.25rem;
			// border-left: 5px solid #f40;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-box {
				display: flex;
				align-items: center;

				.title-left-line {
					margin-right: 0.3125rem;
					height: 1.125rem;
					width: 0.3125rem;
					background-color: #f40;
				}

				.title-text {
					color: #555;
					font-size: 1rem;
				}
			}

			.right-box {
				cursor: pointer;

				.right-text {
					margin-right: 0.625rem;
					color: #555;
					font-size: 1rem;
				}
			}

		}

		.list-box {
			width: 100%;
			/* 样式设置在属性中 */

			.list-item-box {
				display: flex;
				align-items: center;
				width: 100%;

				.img-box {
					width: 4rem;
					height: 3rem;
					border-radius: 5px;

					image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}

				.title-box {
					flex: 1;
					color: #333;
					font-size: 0.875rem;
					line-height: 1.2;
					margin-left: 0.625rem;
					-webkit-line-clamp: 3;
					/* 限制显示两行 */
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;

					/* 处理溢出文字 */
					text {}
				}

			}
		}
	}
</style>